<template>
	<view class="comp_activity">
		<!--  -->
		<view class="comp_activity_title">
			热门活动上线中
		</view>
		<!-- 进行中 -->
		<block v-for="item,index in hotArr">
			<view class="nav_a" @tap="avtivity(item)">
				<view class="hot_activity">
					<image class="img" :src="`${item.image}`" mode="widthFix"></image>
				</view>
				<view class="hot_title">
					<view class="txt">
						{{item.name}}
					</view>
					<view class="now">
						<view class="lj">立即参与</view>
						<uni-icons type="right" size="16" color="#50969F"></uni-icons>
					</view>
				</view>
			</view>
		</block>

		<view class="comp_activity_title">
			往期回顾
		</view>
		<!-- 结束了 -->
		<block v-for="item,index in endArr">
			<view class="nav_a">
				<view class="hot_activity">
					<image class="img" :src="`${item.image}`" mode="widthFix"></image>
				</view>
				<view class="hot_title">
					<view class="txt">
						{{item.name}}
					</view>
					<view class="now">
						<view class="lj">查看详情</view>
						<uni-icons type="right" size="16" color="#50969F"></uni-icons>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	export default {
		name: "compActivity",
		props: ["hotArr", "endArr"],
		data() {
			return {
				
			};
		},
		// components:{compLoad},
		methods: {
			avtivity(k) {
				console.log(k.url)
				uni.navigateTo({
					url: `/pages/childPage/webView/webView?url=${k.url}`,
				});
			}
		},
		
	}
</script>

<style lang="scss">
	.comp_activity {
		width: 100%;

		.comp_activity_title {
			width: 90%;
			margin: 0 auto;
			font-weight: bold;
			font-size: 34rpx;
			padding: 26rpx 0;
			letter-spacing: 5rpx;

		}

		.nav_a {
			width: 90%;
			margin: 0 auto;

			.hot_activity {
				width: 100%;

				.img {
					width: 100%;
					border-radius: 16rpx;
				}
			}

			.hot_title {
				display: flex;
				font-size: 26rpx;
				font-weight: bold;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0 40rpx 0;
				letter-spacing: 5rpx;

				.txt {
					width: 74%;
				}

				.now {
					font-size: 0;
					width: 22%;
					color: #50969F;
					display: flex;
					align-items: center;

					.lj {
						font-size: 20rpx;

					}
				}
			}
		}
	}
</style>
